<template>
  <div class="wrapper">
    <div class="select-row">
      <lottery-box
        class="box-adjust"
        v-for="(number, index) in item.numbers"
        :key="number.id"
        :content="number.number"
        :parameter="number.parameter && number.parameter[activeSwitchIndex].number"
        @click.native="changeSelectionState(index)"
        :class="addClass(number.selected, number.color)"
      >
      </lottery-box>
    </div>
  </div>
</template>

<script>
import LotteryBox from '@/components/base/lottery-box/lottery-box'
import { mapGetters } from 'vuex'
export default {
  components: {
    LotteryBox
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          id: 1,
          place: {
            context: '',
            position: 0
          },
          numbers: [
            {
              id: 1,
              number: 0,
              selected: false,
              color: 'grey',
              parameter: [
                {
                  type: 'missing',
                  number: 9.75,
                  context: '遗漏'
                }
              ]
            }
          ]
        }
      }
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    }
  },
  created() {
    console.log(this.item)
  },
  methods: {
     // 改变球的选中状态
    changeSelectionState(index) {
      let numbers = this.clonedItem.numbers
      numbers[index].selected = numbers[index].selected ? false : true
      // 选中后赔率变金额
     if (numbers[index].selected) {
        numbers[index].parameter[this.activeSwitchIndex].parameter = numbers[index].parameter[this.activeSwitchIndex].number
        // console.log(parameter)
        numbers[index].parameter[this.activeSwitchIndex].number = this.getUnitPrice 
        numbers[index].unitPrice = this.getUnitPrice 
      } else {
        numbers[index].parameter[this.activeSwitchIndex].number = numbers[index].parameter[this.activeSwitchIndex].parameter
        numbers[index].unitPrice = 0
      }
      this.$emit('click', this.clonedItem)

    },
    addClass(selected, className) {
      let classList = []
      if (selected) {
        classList.push('active')
      }
      if (className) {
        classList.push(className)
      }
      return classList.join(' ')
    },
  },
  computed: {
    clonedItem() {
      return JSON.parse(JSON.stringify(this.item))
    },
    ...mapGetters('lottery', ['getUnitPrice', 'getUnitRate'])
  }
} 
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  
.wrapper 
  box-sizing border-box
  padding-left 10px 
  .select-row 
    display flex
    flex-wrap wrap
    .box-adjust
      margin 10px 0
      margin-left 10px 
      &.number-box-select-green
        border: 1px solid $color-ball-green;
        background: rgba($color-ball-green, 0.102);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
        box-sizing: border-box
        color $color-ball-green
      &.number-box-select-red
        border: 1px solid $color-ball-red;
        background: rgba($color-ball-red, 0.102);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
        box-sizing: border-box
        color $color-ball-red
      &.number-box-select-blue
        border: 1px solid $color-ball-blue;
        background: rgba($color-ball-blue, 0.102);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
        box-sizing: border-box
        color $color-ball-blue
      &.number-box-select-grey
        border-style: solid;
        border-width: 1px;
        border-color: rgb(140, 143, 152);
        background-color: rgba(140, 143, 152, 0.102);

</style> 